<template>
  <div id="layout-base">
    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout-content>
        <router-view></router-view>
      </a-layout-content>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
export default {
  name: 'Main',
  data () {
    return {

    }
  }
}
</script>

<style lang="less" scoped>
@base-color: #597ef7;
#layout-base {
  height: 100%;
  .ant-layout {
    height: 100%;
  }
  .ant-layout-header {
    background-color: @base-color;
  }
  .ant-layout-content {
    color: #fff;
    flex: 1;
  }
}
</style>
